<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="10" style="margin: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">职位刷新排行榜TOP100</b>
            <el-radio-group
              v-model="refreshTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioRefChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="refreshList" style="width: 100%" border>
            <el-table-column
              prop="jobname"
              label="职位名称"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="educationCN"
              label="学历要求"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="experienceCN"
              label="经验要求"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="districtCN"
              label="工作地区"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="刷新次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="updatetime"
              label="更新时间"
              width="width"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.updatetime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">企业下载量排行榜TOP100</b>
            <el-radio-group
              v-model="qyDownLoadTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioQyDownChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="qyDownLoadList" style="width: 100%" border>
            <el-table-column prop="companyName" label="企业名称" width="150">
            </el-table-column>
            <el-table-column prop="nature" label="企业性质" width="width">
            </el-table-column>
            <el-table-column prop="scale" label="企业规模" width="width">
            </el-table-column>
            <el-table-column prop="trade" label="所属行业" width="width">
            </el-table-column>
            <el-table-column prop="district" label="所在地区" width="width">
            </el-table-column>
            <el-table-column prop="count" label="下载简历数" width="width">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">企业登录排行榜TOP100</b>
            <el-radio-group
              v-model="qyLoginTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioQyLoginChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="qyLoginList" style="width: 100%" border>
            <el-table-column prop="companyName" label="企业名称" width="width">
            </el-table-column>
            <el-table-column prop="nature" label="企业性质" width="width">
            </el-table-column>
            <el-table-column prop="scale" label="企业规模" width="width">
            </el-table-column>
            <el-table-column prop="trade" label="所属行业" width="width">
            </el-table-column>
            <el-table-column prop="district" label="所在地区" width="width">
            </el-table-column>
            <el-table-column prop="count" label="登录次数" width="width">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">职位被投递排行榜TOP100</b>
            <el-radio-group
              v-model="zwDeliverTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioZwDeliverChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="zwDeliverList" style="width: 100%" border>
            <el-table-column prop="companyName" label="企业名称" width="width">
            </el-table-column>
            <el-table-column prop="nature" label="企业性质" width="width">
            </el-table-column>
            <el-table-column prop="count" label="企业规模" width="width">
            </el-table-column>
            <el-table-column prop="trade" label="所属行业" width="width">
            </el-table-column>
            <el-table-column prop="district" label="所在地区" width="width">
            </el-table-column>
            <el-table-column prop="count" label="投递次数" width="width">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin: 10px">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">热门职位排行榜TOP100</b>
            <el-radio-group
              v-model="hotZwTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioHotZwChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="hotZwList" style="width: 100%" border>
            <el-table-column
              prop="jobname"
              label="职位名称"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="educationCN"
              label="学历要求"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="experienceCN"
              label="经验要求"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="districtCN"
              label="工作地区"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="被查看次数"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="updatetime"
              label="更新时间"
              width="200"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.updatetime | dateFormat }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <b class="title">热门企业排行榜TOP100</b>
            <el-radio-group
              v-model="hotEnterpriseTime"
              style="float: right; padding: 3px 0"
              type="text"
              size="mini"
              @change="handleRadioHotEnterpriseChange"
            >
              <el-radio-button label="">不限</el-radio-button>
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="mouth">月</el-radio-button>
            </el-radio-group>
          </div>
          <el-table :data="hotEnterpriseList" style="width: 100%" border>
            <el-table-column prop="companyName" label="企业名称" width="width" align="center">
            </el-table-column>
            <el-table-column prop="nature" label="企业性质" width="width" align="center">
            </el-table-column>
            <el-table-column prop="scale" label="企业规模" width="width" align="center">
            </el-table-column>
            <el-table-column prop="trade" label="所属行业" width="width" align="center">
            </el-table-column>
            <el-table-column prop="district" label="所在地区" width="width" align="center">
            </el-table-column>
            <el-table-column prop="count" label="查看次数" width="width" align="center">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  companyHotApi,
  companyHotDownloadApi,
  companyHotLoginApi,
  companyHotDeliveryJobApi,
  companyHotJobApi,
  companyHotCompanyApi,
} from "@/api/portrait";
export default {
  data() {
    return {
      refreshTime: "",
      refreshList: [],
      qyDownLoadTime: "",
      qyDownLoadList: [],
      qyLoginTime: "",
      qyLoginList: [],
      zwDeliverTime: "",
      zwDeliverList: [],
      hotZwTime: "",
      hotZwList: [],
      hotEnterpriseTime: "",
      hotEnterpriseList: [],
    };
  },
  created() {
    this.companyHot();
    this.companyHotDownload();
    this.companyHotLogin();
    this.companyHotDeliveryJob();
    this.companyHotJob();
    this.companyHotCompany()
  },
  methods: {
    // 职位刷新排行榜
    async companyHot() {
      const res = await companyHotApi(this.refreshTime);
      this.refreshList = res.data;
    },
    // 点击职位刷新排行榜按钮切换
    async handleRadioRefChange(e) {
      console.log(e);
      const res = await companyHotApi(e);
      this.refreshList = res.data;
    },
    // 企业下载排行榜
    async companyHotDownload() {
      const res = await companyHotDownloadApi(this.qyDownLoadTime);
      this.qyDownLoadList = res.data;
    },
    // 点击企业下载排行榜按钮切换
    async handleRadioQyDownChange(e) {
      console.log(e);
      const res = await companyHotDownloadApi(e);
      this.qyDownLoadList = res.data;
    },
    // 企业登录排行榜
    async companyHotLogin() {
      const res = await companyHotLoginApi(this.qyLoginTime);
      this.qyLoginList = res.data;
    },
    // 点击登录次数排行榜按钮切换
    async handleRadioQyLoginChange(e) {
      const res = await companyHotLoginApi(e);
      this.qyLoginList = res.data;
    },
    // 职位被投递排行榜
    async companyHotDeliveryJob() {
      const res = await companyHotDeliveryJobApi(this.zwDeliverTime);
      this.zwDeliverList = res.data;
    },
    // 点击职位被投递排行榜按钮切换
    async handleRadioZwDeliverChange(e) {
      const res = await companyHotDeliveryJobApi(this.zwDeliverTime);
      this.zwDeliverList = res.data;
    },
    // 热门职位排行榜
    async companyHotJob() {
      const res = await companyHotJobApi(this.hotZwTime);
      this.hotZwList = res.data;
    },
    // 点击热门职位排行榜按钮切换
    async handleRadioHotZwChange(e) {
      const res = await companyHotJobApi(this.hotZwTime);
      this.hotZwList = res.data;
    },
    // 热门企业排行榜
    async companyHotCompany() {
      const res = await companyHotCompanyApi(this.hotEnterpriseTime);
      this.hotEnterpriseList = res.data;
    },
    // 点击热门企业排行榜按钮切换
    async handleRadioHotEnterpriseChange(e) {
      const res = await companyHotCompanyApi(e);
      this.hotEnterpriseList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.title {
  line-height: 35px;
}
.el-table {
  max-height: 300px;
  overflow-y: auto;
}
</style>
